<template>
  <div>
    <!-- Start 查询用户 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="查询用户" >
        <el-select v-model="userOption" placeholder="请选择查询条件" class="input-width-small">
          <el-option
            v-for="option in userOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="handleAddTag" icon="el-icon-plus">添加筛选条件</el-button>
        <el-button type="info" @click="clearTag" icon="el-icon-delete">清空条件</el-button>
        <el-button type="primary" @click="findUser" icon="el-icon-search" :loading="loadSearchBtn">查询</el-button>
      </el-form-item>

      <el-form-item class="float-right">
        <!-- <el-badge :value="chosedUserList.length" class="item"> -->
          <el-button type="danger" @click="clickDelete(chosedUserList)" icon="el-icon-delete">批量删除 {{ chosedUserList.length }}</el-button>
        <!-- </el-badge> -->
        <el-button type="primary" @click="clickAdd" icon="el-icon-plus">添加用户</el-button>
      </el-form-item>
    </el-form>

    <!-- End 查询用户 -->

    <!-- Start 用户查询标签 -->
    <div class="div-searh-tag">
        <el-tag
            :key="tag.label || 'temp'"
            v-for="tag in userFilters"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
            >
            {{ tag.label }}: {{tag.value}}
        </el-tag>
    </div>
    <!-- End 用户查询标签-->
    <!-- Start 用户列表 -->
    <UserList 
      :clickDetail="clickDetail" 
      :clickEdit="clickEdit" 
      :clickDelete="clickDelete" 
      :clickAdd="clickAdd"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :getChosedUserList="getChosedUserList"
    ></UserList>
    <!-- End 用户列表 -->

    <!-- Start 用户分页 -->
    <UserPage :reloadRouterView="reloadRouterView"></UserPage>
    <!-- End 用户分页 -->
    <hr>

    <Detail :visible="detailVisible" :closeDetail="closeDetail" :userInfo="userInfo"></Detail>
    <Edit :visible="editVisible" :closeEdit="closeEdit" :userInfo="userInfo"></Edit>
    <Add :visible="addVisible" :closeAdd="closeAdd"></Add>
    
  </div>
</template>

<script>
import { message } from '@/element-ui/message';
import UserList from './list/UserList.vue'
import UserPage from './page/index.vue'
import Detail from './popup/Detail.vue';
import Edit from './popup/Edit.vue'
import Add from './popup/Add.vue';
export default {
  name: "User",
  data() {
    return {
      userOption: "id",
      keyword: "",
      userOptions: [
        { label: "ID", value: "id" },
        { label: "用户名称", value: "name" },
      ],
      userFilters: [],
      inputVisible: false,
      inputValue: "",
      // 详情弹窗是否可见
      detailVisible: false,
      // 编辑弹窗是否可见
      editVisible: false,
      // 添加用户窗口是否可见
      addVisible: false,
      userInfo: {},
      // 页面加载
      loading: true,
      // 按钮加载
      loadSearchBtn: false,
      // 选中的用户
      chosedUserList: []
    };
  },
  mounted(){
      setTimeout(() => {
        this.loading = false
      }, 500)
  },
  methods: {
    // 删除查询的标签
    handleClose(tag) {
      this.userFilters.splice(this.userFilters.indexOf(tag), 1);
    },

    // 添加新的标签
    handleAddTag() {
        // 防止输入为空
        if(this.keyword === '') return message.warning('请输入有效的查询内容')
        // 防止出现重复的条件
        let count = this.userFilters.filter(tag => tag.label === this.userOption && tag.value === this.keyword).length
        if(count) return message.warning('该标签已存在')
        // 根据Key进行更新
        let flag = true         // 标记是否需要添加
        this.userFilters.forEach(tag => {  
            if(tag.label === this.userOption){  // 若已存在 则更新 value 
                tag.value = this.keyword
                flag = false
                message.success('更新成功')
            }   
        })
        if(flag){
            this.userFilters.push({             // 若不存在 则查找name
                label: this.userOption,
                value: this.keyword
            })
            message.success('添加成功')
        }
        this.keyword = ''
    },

    // 查询用户
    findUser() {
      // 取出查询条件
      let condition = {}
      this.userFilters.forEach( f => {
        condition[f.label] = f.value
      })
      this.loadSearchBtn = true
      this.$store.dispatch('user/find', [condition, this.reloadRouterView])
      setTimeout(()=>{
        this.loadSearchBtn = false
      }, 2000)
    },
    // 清空标签
    clearTag(){
        this.userFilters = []
        message.success('清空完毕')
    },
    // 查看用户详情
    clickDetail(userInfo){
      this.detailVisible = true
      this.userInfo = userInfo
    },
    // 编辑用户
    clickEdit(userInfo){
      this.editVisible = true
      this.userInfo = userInfo
    },
    // 删除指定用户
    clickDelete(userList){
      if(userList == null || userList.length == 0) {
          return message.warning('请先选择需要删除的用户')
      }
      this.$confirm('确认要删除用户吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        // 请求删除用户, 删除后重新路由
        this.$store.dispatch('user/remove', [userList, this.reloadRouterView])
      }).catch(()=> {
        // 取消删除
      })
    },
    // 添加用户
    clickAdd(){
      this.addVisible = true
    },
    // 关闭详情弹窗
    closeDetail(){ this.detailVisible = false },
    // 关闭编辑弹窗
    closeEdit() {
      this.editVisible = false
    },
    // 关闭添加用户弹窗
    closeAdd(){
      this.addVisible = false
    },
    // 获取选中的用户
    getChosedUserList(userList){
      this.chosedUserList = userList
    }
  },
  components: { UserList, UserPage, Detail, Edit, Add },
  props: ['reloadRouterView']
}
</script>
<style scoped>
    .input-width-small{
        width: 125px;
    }
    .div-searh-tag span{
        margin-inline: 10px;
    }
    .float-right{
      float: right;
    }
  
</style>